import React, { useRef, useState, useEffect } from 'react';
import { Slider } from 'antd';
import moment from 'moment';
// styles
import styles from './index.less';
// 自定义组件
import { playData } from './playdata';
// 公用方法及函数
import * as PIXI from '@/components/LEAFLET_SDK/libs/pixi.js-legacy';
import { getPlayBackOptions } from './transData';

let _trackplayback = null;
let timer = null;
let timeout = 0.5 * 1000;

export default () => {
  const map = window?.LFTmap;
  const [playing, updatePlaying] = useState(false);
  const [speed, updateSpeed] = useState(8);
  const [curTime, updateCurTime] = useState(0);
  const [startTime, updateStartTime] = useState(0);
  const [endTime, updateEndTime] = useState(0);
  const [precent, updatePrecent] = useState(0);
  const preState = useRef({ show: false });
  const [track, setTrack] = useState({
    show: true,
    data: [],
    options: {},
    onClose: () => {},
  });

  const initTrackPlay = (data) => {
    if (data && data.length) {
      const options = getPlayBackOptions('0301');
      console.log(window?.LFTmap);
      _trackplayback = new L.TrackPlayBack(data, window?.LFTmap, options);
      _trackplayback.start();
      initTrackControl();
    }
  };
  const initTrackControl = () => {
    updatePlaying(true);
    updateSpeed(_trackplayback.getSpeed());
    updateCurTime(_trackplayback.getCurTime());
    updateStartTime(_trackplayback.getStartTime());
    updateEndTime(_trackplayback.getEndTime());
    loopTime();
  };
  const remove = () => {
    _trackplayback && _trackplayback.dispose();
    _trackplayback = null;
    cancelLoop();
  };
  const cancelLoop = () => {
    timer && clearTimeout(timer);
    timer = null;
  };
  const calcPercent = (ct) => {
    const st = _trackplayback.getStartTime();
    const et = _trackplayback.getEndTime();
    return (ct - st) / (et - st);
  };
  const loopTime = () => {
    timer = setTimeout(() => {
      if (_trackplayback) {
        if (_trackplayback.isPlaying()) {
          const ct = _trackplayback.getCurTime();
          const pc = calcPercent(ct);
          updatePrecent(pc);
          updateCurTime(ct);
          if (pc < 100) {
            loopTime();
          } else {
            doPause();
          }
        } else {
          updatePlaying(false);
        }
      }
      updateCurTime(_trackplayback.getCurTime());
    }, timeout);
  };
  const changePercent = () => {
    _trackplayback && _trackplayback.setCurson(ct);
  };
  const onChangePercent = (value) => {
    const ct = calcPercent(value);
    changePercent(ct);
  };
  const doPause = () => {
    if (_trackplayback) {
      _trackplayback.stop();
      updatePlaying(false);
    }
  };
  const doPlay = () => {
    if (_trackplayback) {
      _trackplayback.start();
      updatePlaying(true);
      loopTime();
    }
  };
  const doReplay = () => {
    if (_trackplayback) {
      cancelLoop();
      updatePlaying(true);
      _trackplayback.replaying();
    }
  };
  const doBackwor = () => {
    if (_trackplayback) {
      updateSpeed(_trackplayback.slowSpeed().getSpeed());
    }
  };
  const doForward = () => {
    if (_trackplayback) {
      updateSpeed(_trackplayback.quickSpeed().getSpeed());
    }
  };
  const onClose = () => {
    setTrack({ ...track, show: false });
  };
  const doClose = () => {
    remove();
    onClose && onClose();
  };

  useEffect(() => {
    remove();
    if (preState.current.show !== track.show && track.show && playData.length) {
      console.log('进来了', playData);
      initTrackPlay(playData, map, track.options);
    }
    preState.current = { show: track.show };

    return () => {
      cancelLoop();
    };
  }, [track?.show, track?.data, map, track?.options, preState]);
  return (
    <div className={styles.trackPlayContainer}>
      当前时间：{curTime ? moment(curTime).format('YYYY-MM-DD HH:mm:ss') : ''}
      开始时间：
      {startTime ? moment(startTime).format('YYYY-MM-DD HH:mm:ss') : ''}
      结束时间：{endTime ? moment(endTime).format('YYYY-MM-DD HH:mm:ss') : ''}
      倍数：{speed}x
      <Slider value={precent} onChange={onChangePercent} />
      <div onClick={doPause}>暂停</div>
      <div onClick={doPlay}>播放</div>
      <div onClick={doReplay}>重播</div>
      <div onClick={doBackwor}>后退</div>
      <div onClick={doForward}>前进</div>
    </div>
  );
};
